<template>
  <div class="view">
    <div class="midbox">
      <x-header :left-options="{backText: ''}" class="vux-1px-b">
        <ul style="border:0;">
          <li :class="{ on: isonup}" @click="isonup = true">待审核</li>
          <li :class="{ on: !isonup}" @click="isonup = false">已到账</li>
        </ul>
      </x-header>
      <div class="tabtab">
        <div class="box_checkpending" v-for="(item,index) in sendContent1" :key="'send1' + index" v-show="isonup">
          <div class="box_c">
            <i class="cardinto-icon"></i>
            <p class="money">
              ￥{{item.integral_money}} &#12288;&#12288;
              <em style="color: #666666; font-size:.3rem" v-if="item.apply_remark!='活动提现'">手续费：{{item.integral_money * 0.1 | money}} &#12288;&#12288;</em>
              <em style="color: #666666; font-size:.3rem">到账金额：{{item.putforward_money}}</em>
            </p>
            <p class="user">
              {{item.account_number}}&#12288;&#12288;提现方式：
              <label v-if="item.account_type === 1">银行卡</label>
              <label v-if="item.account_type === 2">微信</label>
              <label v-if="item.account_type === 3">支付宝</label>
            </p>
            <p class="datee">
              {{item.apply_time | formatDate}}&#12288;&#12288;
              <span v-if="item.apply_status===0">审核中</span>
              <span v-if="item.apply_status===1">已通过</span>
              <span v-if="item.apply_status===2">已拒绝</span><br />
              <label v-if="item.apply_status===2">{{item.reject_reason}}</label>
            </p>
          </div>
        </div>
        <div class="box_toAccount" v-for="(item,index) in sendContent2" :key="'send2' + index" v-show="!isonup">
          <div class="box_t">
            <i class="cardinto-icon"></i>
            <p class="moneys">
              ￥{{item.putforward_money}}&#12288;&#12288;
              <em style="color: #666666; font-size:.3rem" v-if="item.apply_remark!='活动提现'">手续费：{{item.integral_money * 0.1 | money}} &#12288;&#12288;</em>
              <em style="color: #666666; font-size:.3rem">申请金额：{{item.integral_money}}</em>
            </p>
            <p class="users">
              {{item.account_number}}&#12288;&#12288;提现方式：
              <label v-if="item.account_type === 1">银行卡</label>
              <label v-if="item.account_type === 2">微信</label>
              <label v-if="item.account_type === 3">支付宝</label>
            </p>
            <p class="datees">{{item.ok_putforward_time | formatDate }}<span>提现成功</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import '../../../filters/moneyfilter.js'
import { GetPutForwardList } from '@api'
import { formatDate } from '../../../filters/date.js'

export default {
  // 转换时间格式
  filters: {
    formatDate (time) {
      var dtime = time.slice(6, 19)
      var date = new Date(parseInt(dtime))
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  data () {
    return {
      isonup: true,
      sendContent1: [], // 待审核
      sendContent2: [] // 已提现
    }
  },
  methods: {
    // 加载页面数据
    async loadData () {
      // 获取用户收款账户列表
      let res = await GetPutForwardList()
      if (res.code === 200) {
        for (let i = 0; i < res.data.length; i++) {
          switch (res.data[i].is_putforward) {
            case 0:
              // 待审核
              this.sendContent1.push(res.data[i])
              this.$forceUpdate()
              break
            case 1:
              // 已提现
              this.sendContent2.push(res.data[i])
              this.$forceUpdate()
              break
            default:
              break
          }
        }
      }
    }
  },
  activated () {
    // 加载页面数据
    this.loadData()
  }
}
</script>
<style lang="scss" scoped>
.view {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  .midbox {
    width: 100%;
    background-color: #fff;
    ul {
      width: 100%;
      margin-top: 5%;
      text-align: center;
      border-bottom: .0125rem solid rgba(191, 191, 191, 1);
      li {
        float: left;
        color: #000;
        width: 45%;
        line-height: .65rem;
        margin-left: 2.5%;
      }
      li.on {
        color: #ff0036;
        border-bottom: .025rem solid #ff0036;
      }
    }
    .tabtab {
      .box_c {
        margin-top: .175rem;
        width: 100%;
        background-color: #f7f7f7;
        /*clear: both;*/
        overflow: hidden;
        i {
          margin: 3%;
          float: left;
        }
        p {
          margin: 2%;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          font-size: .3rem;
        }
        .money {
          padding-top: 3%;
          color: #ff0036;
        }
        .user {
          color: #666666;
        }
        span {
          text-align: center;
          margin-right: .5rem;
          color: #ff0036;
          float: right;
          width: 1.7625rem;
          height: .5125rem;
          border: .01875rem solid rgba(255, 0, 54, 1);
          border-radius: .1rem;
          line-height: .5125rem;
        }
      }
      .box_t {
        margin-top: .175rem;
        width: 100%;
        background-color: #f7f7f7;
        overflow: hidden;
        i {
          margin: 3%;
          float: left;
        }
        p {
          margin: 2%;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          font-size: .3rem;
        }
        .moneys {
          padding-top: 3%;
          color: #ff0036;
        }
        .users {
          color: #666666;
        }
        span {
          text-align: center;
          margin-right: .5rem;
          color: #ff0036;
          float: right;
          width: 1.7625rem;
          height: .5125rem;
          border: .01875rem solid rgba(255, 0, 54, 1);
          border-radius: .1rem;
          line-height: .5125rem;
        }
      }
    }
  }
}
</style>
